import 'package:flutter/material.dart';
import 'dart:math';

void main() {
  runApp(const AnimationDemoApp());
}

class AnimationDemoApp extends StatelessWidget {
  const AnimationDemoApp({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter 动画综合演示',
      theme: ThemeData(
        primarySwatch: Colors.blue,
        visualDensity: VisualDensity.adaptivePlatformDensity,
      ),
      home: const AnimationMainPage(),
    );
  }
}

// 主选择页面
class AnimationMainPage extends StatelessWidget {
  const AnimationMainPage({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('Flutter 动画演示'),
        centerTitle: true,
        elevation: 2,
      ),
      body: Container(
        decoration: BoxDecoration(
          gradient: LinearGradient(
            begin: Alignment.topLeft,
            end: Alignment.bottomRight,
            colors: [Colors.blue[50]!, Colors.purple[50]!],
          ),
        ),
        child: SafeArea(
          child: Padding(
            padding: const EdgeInsets.all(20),
            child: Column(
              mainAxisAlignment: MainAxisAlignment.center,
              children: [
                // 标题区域
                Container(
                  padding: const EdgeInsets.all(20),
                  decoration: BoxDecoration(
                    color: Colors.white,
                    borderRadius: BorderRadius.circular(16),
                    boxShadow: [
                      BoxShadow(
                        color: Colors.grey.withOpacity(0.1),
                        spreadRadius: 5,
                        blurRadius: 7,
                        offset: const Offset(0, 3),
                      ),
                    ],
                  ),
                  child: Column(
                    children: [
                      Icon(Icons.animation, size: 60, color: Colors.blue[600]),
                      const SizedBox(height: 16),
                      const Text(
                        'Flutter 动画演示',
                        style: TextStyle(
                          fontSize: 24,
                          fontWeight: FontWeight.bold,
                          color: Colors.black87,
                        ),
                      ),
                      const SizedBox(height: 8),
                      const Text(
                        '选择您想要体验的动画类型',
                        style: TextStyle(fontSize: 16, color: Colors.grey),
                      ),
                    ],
                  ),
                ),

                const SizedBox(height: 40),

                // 交织动画按钮
                _buildAnimationCard(
                  context,
                  title: '交织动画演示',
                  subtitle: '多个动画按时间序列交织执行',
                  icon: Icons.timeline,
                  color: Colors.purple,
                  onTap:
                      () => Navigator.push(
                        context,
                        MaterialPageRoute(
                          builder: (context) => const StaggerAnimationPage(),
                        ),
                      ),
                ),

                const SizedBox(height: 20),

                // Hero动画按钮
                _buildAnimationCard(
                  context,
                  title: 'Hero 动画演示',
                  subtitle: '页面间的共享元素过渡动画',
                  icon: Icons.flight_takeoff,
                  color: Colors.orange,
                  onTap:
                      () => Navigator.push(
                        context,
                        MaterialPageRoute(
                          builder: (context) => const HeroAnimationMainPage(),
                        ),
                      ),
                ),

                const SizedBox(height: 40),

                // 底部说明
                Container(
                  padding: const EdgeInsets.all(16),
                  decoration: BoxDecoration(
                    color: Colors.white.withOpacity(0.8),
                    borderRadius: BorderRadius.circular(12),
                  ),
                  child: const Text(
                    '点击上方卡片体验不同的动画效果\n每种动画都有多个示例和变化',
                    textAlign: TextAlign.center,
                    style: TextStyle(
                      fontSize: 14,
                      color: Colors.grey,
                      height: 1.5,
                    ),
                  ),
                ),
              ],
            ),
          ),
        ),
      ),
    );
  }

  Widget _buildAnimationCard(
    BuildContext context, {
    required String title,
    required String subtitle,
    required IconData icon,
    required Color color,
    required VoidCallback onTap,
  }) {
    return Container(
      width: double.infinity,
      child: Card(
        elevation: 8,
        shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(16)),
        child: InkWell(
          onTap: onTap,
          borderRadius: BorderRadius.circular(16),
          child: Container(
            padding: const EdgeInsets.all(24),
            decoration: BoxDecoration(
              borderRadius: BorderRadius.circular(16),
              gradient: LinearGradient(
                begin: Alignment.topLeft,
                end: Alignment.bottomRight,
                colors: [color.withOpacity(0.1), color.withOpacity(0.05)],
              ),
            ),
            child: Row(
              children: [
                Container(
                  padding: const EdgeInsets.all(16),
                  decoration: BoxDecoration(
                    color: color.withOpacity(0.2),
                    borderRadius: BorderRadius.circular(12),
                  ),
                  child: Icon(icon, size: 32, color: color),
                ),
                const SizedBox(width: 20),
                Expanded(
                  child: Column(
                    crossAxisAlignment: CrossAxisAlignment.start,
                    children: [
                      Text(
                        title,
                        style: TextStyle(
                          fontSize: 18,
                          fontWeight: FontWeight.bold,
                          color: Colors.grey[800],
                        ),
                      ),
                      const SizedBox(height: 8),
                      Text(
                        subtitle,
                        style: TextStyle(fontSize: 14, color: Colors.grey[600]),
                      ),
                    ],
                  ),
                ),
                Icon(
                  Icons.arrow_forward_ios,
                  color: Colors.grey[400],
                  size: 20,
                ),
              ],
            ),
          ),
        ),
      ),
    );
  }
}

// ========================== 交织动画部分 ==========================

class StaggerAnimationPage extends StatefulWidget {
  const StaggerAnimationPage({Key? key}) : super(key: key);

  @override
  State<StaggerAnimationPage> createState() => _StaggerAnimationPageState();
}

class _StaggerAnimationPageState extends State<StaggerAnimationPage>
    with TickerProviderStateMixin {
  late AnimationController _controller;
  late AnimationController _complexController;
  bool _isPlaying = false;

  @override
  void initState() {
    super.initState();
    _controller = AnimationController(
      vsync: this,
      duration: const Duration(seconds: 3),
    );
    _complexController = AnimationController(
      vsync: this,
      duration: const Duration(seconds: 4),
    );
  }

  @override
  void dispose() {
    _controller.dispose();
    _complexController.dispose();
    super.dispose();
  }

  Future<void> _playBasicAnimation() async {
    if (_isPlaying) return;
    setState(() => _isPlaying = true);

    try {
      await _controller.forward();
      await Future.delayed(const Duration(milliseconds: 500));
      await _controller.reverse();
    } catch (e) {
      print('动画取消: $e');
    } finally {
      setState(() => _isPlaying = false);
    }
  }

  Future<void> _playComplexAnimation() async {
    if (_isPlaying) return;
    setState(() => _isPlaying = true);

    try {
      await _complexController.forward();
      await Future.delayed(const Duration(milliseconds: 500));
      await _complexController.reverse();
    } catch (e) {
      print('动画取消: $e');
    } finally {
      setState(() => _isPlaying = false);
    }
  }

  void _resetAnimations() {
    _controller.reset();
    _complexController.reset();
    setState(() => _isPlaying = false);
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('交织动画演示'),
        elevation: 2,
        actions: [
          IconButton(
            icon: const Icon(Icons.refresh),
            onPressed: _resetAnimations,
            tooltip: '重置动画',
          ),
        ],
      ),
      body: SingleChildScrollView(
        padding: const EdgeInsets.all(16),
        child: Column(
          children: [
            // 控制按钮区域
            Container(
              width: double.infinity,
              padding: const EdgeInsets.all(20),
              decoration: BoxDecoration(
                color: Colors.white,
                borderRadius: BorderRadius.circular(12),
                boxShadow: [
                  BoxShadow(
                    color: Colors.grey.withOpacity(0.1),
                    spreadRadius: 2,
                    blurRadius: 5,
                    offset: const Offset(0, 2),
                  ),
                ],
              ),
              child: Column(
                children: [
                  const Text(
                    '动画控制台',
                    style: TextStyle(fontSize: 18, fontWeight: FontWeight.bold),
                  ),
                  const SizedBox(height: 16),
                  Row(
                    children: [
                      Expanded(
                        child: ElevatedButton.icon(
                          onPressed: _isPlaying ? null : _playBasicAnimation,
                          icon: const Icon(Icons.play_arrow),
                          label: const Text('基础交织动画'),
                          style: ElevatedButton.styleFrom(
                            backgroundColor: Colors.purple,
                            foregroundColor: Colors.white,
                            padding: const EdgeInsets.symmetric(vertical: 12),
                          ),
                        ),
                      ),
                      const SizedBox(width: 12),
                      Expanded(
                        child: ElevatedButton.icon(
                          onPressed: _isPlaying ? null : _playComplexAnimation,
                          icon: const Icon(Icons.auto_awesome),
                          label: const Text('复杂交织动画'),
                          style: ElevatedButton.styleFrom(
                            backgroundColor: Colors.orange,
                            foregroundColor: Colors.white,
                            padding: const EdgeInsets.symmetric(vertical: 12),
                          ),
                        ),
                      ),
                    ],
                  ),
                  if (_isPlaying) ...[
                    const SizedBox(height: 16),
                    const LinearProgressIndicator(),
                    const SizedBox(height: 8),
                    const Text(
                      '动画播放中...',
                      style: TextStyle(color: Colors.grey),
                    ),
                  ],
                ],
              ),
            ),

            const SizedBox(height: 24),

            // 基础交织动画演示区域
            Container(
              width: double.infinity,
              padding: const EdgeInsets.all(20),
              decoration: BoxDecoration(
                color: Colors.white,
                borderRadius: BorderRadius.circular(12),
                boxShadow: [
                  BoxShadow(
                    color: Colors.grey.withOpacity(0.1),
                    spreadRadius: 2,
                    blurRadius: 5,
                    offset: const Offset(0, 2),
                  ),
                ],
              ),
              child: Column(
                crossAxisAlignment: CrossAxisAlignment.start,
                children: [
                  const Text(
                    '基础交织动画',
                    style: TextStyle(fontSize: 16, fontWeight: FontWeight.bold),
                  ),
                  const SizedBox(height: 8),
                  const Text(
                    '高度、颜色和位移动画的时间序列组合',
                    style: TextStyle(color: Colors.grey),
                  ),
                  const SizedBox(height: 16),
                  Container(
                    width: double.infinity,
                    height: 320,
                    decoration: BoxDecoration(
                      border: Border.all(color: Colors.grey[300]!),
                      borderRadius: BorderRadius.circular(8),
                      color: Colors.grey[50],
                    ),
                    child: BasicStaggerAnimation(controller: _controller),
                  ),
                ],
              ),
            ),

            const SizedBox(height: 24),

            // 复杂交织动画演示区域
            Container(
              width: double.infinity,
              padding: const EdgeInsets.all(20),
              decoration: BoxDecoration(
                color: Colors.white,
                borderRadius: BorderRadius.circular(12),
                boxShadow: [
                  BoxShadow(
                    color: Colors.grey.withOpacity(0.1),
                    spreadRadius: 2,
                    blurRadius: 5,
                    offset: const Offset(0, 2),
                  ),
                ],
              ),
              child: Column(
                crossAxisAlignment: CrossAxisAlignment.start,
                children: [
                  const Text(
                    '复杂交织动画',
                    style: TextStyle(fontSize: 16, fontWeight: FontWeight.bold),
                  ),
                  const SizedBox(height: 8),
                  const Text(
                    '包含旋转、缩放、透明度和复杂路径的组合动画',
                    style: TextStyle(color: Colors.grey),
                  ),
                  const SizedBox(height: 16),
                  Container(
                    width: double.infinity,
                    height: 400,
                    decoration: BoxDecoration(
                      border: Border.all(color: Colors.grey[300]!),
                      borderRadius: BorderRadius.circular(8),
                      color: Colors.grey[50],
                    ),
                    child: ComplexStaggerAnimation(
                      controller: _complexController,
                    ),
                  ),
                ],
              ),
            ),

            const SizedBox(height: 24),

            // 动画时间轴说明
            Container(
              width: double.infinity,
              padding: const EdgeInsets.all(20),
              decoration: BoxDecoration(
                color: Colors.blue[50],
                borderRadius: BorderRadius.circular(12),
                border: Border.all(color: Colors.blue[200]!),
              ),
              child: Column(
                crossAxisAlignment: CrossAxisAlignment.start,
                children: [
                  Row(
                    children: [
                      Icon(Icons.info, color: Colors.blue[600]),
                      const SizedBox(width: 8),
                      const Text(
                        '动画时间轴说明',
                        style: TextStyle(
                          fontSize: 16,
                          fontWeight: FontWeight.bold,
                        ),
                      ),
                    ],
                  ),
                  const SizedBox(height: 12),
                  const Text('基础动画时间分配：'),
                  const SizedBox(height: 8),
                  const Text('• 0-60%：高度变化 + 颜色渐变'),
                  const Text('• 60-100%：水平位移'),
                  const SizedBox(height: 12),
                  const Text('复杂动画时间分配：'),
                  const SizedBox(height: 8),
                  const Text('• 0-25%：缩放动画'),
                  const Text('• 25-50%：旋转动画'),
                  const Text('• 50-75%：透明度变化'),
                  const Text('• 75-100%：路径移动'),
                ],
              ),
            ),
          ],
        ),
      ),
    );
  }
}

// 基础交织动画组件
class BasicStaggerAnimation extends StatelessWidget {
  final AnimationController controller;

  late final Animation<double> height;
  late final Animation<Color?> color;
  late final Animation<EdgeInsets> padding;

  BasicStaggerAnimation({Key? key, required this.controller})
    : super(key: key) {
    // 高度动画 (0-280px，占前60%时间)
    height = Tween<double>(begin: 0, end: 280).animate(
      CurvedAnimation(
        parent: controller,
        curve: const Interval(0.0, 0.6, curve: Curves.easeOut),
      ),
    );

    // 颜色动画 (绿色到红色，占前60%时间)
    color = ColorTween(begin: Colors.green, end: Colors.red).animate(
      CurvedAnimation(
        parent: controller,
        curve: const Interval(0.0, 0.6, curve: Curves.ease),
      ),
    );

    // 平移动画 (向右平移150px，占后40%时间)
    padding = Tween<EdgeInsets>(
      begin: const EdgeInsets.only(left: 0),
      end: const EdgeInsets.only(left: 150),
    ).animate(
      CurvedAnimation(
        parent: controller,
        curve: const Interval(0.6, 1.0, curve: Curves.easeInOut),
      ),
    );
  }

  @override
  Widget build(BuildContext context) {
    return AnimatedBuilder(
      animation: controller,
      builder: (context, child) {
        return Container(
          alignment: Alignment.bottomLeft,
          padding: padding.value,
          child: Container(
            width: 60,
            height: height.value,
            decoration: BoxDecoration(
              color: color.value,
              borderRadius: BorderRadius.circular(8),
              boxShadow: [
                BoxShadow(
                  color: (color.value ?? Colors.green).withOpacity(0.3),
                  spreadRadius: 2,
                  blurRadius: 5,
                  offset: const Offset(0, 2),
                ),
              ],
            ),
          ),
        );
      },
    );
  }
}

// 复杂交织动画组件
class ComplexStaggerAnimation extends StatelessWidget {
  final AnimationController controller;

  late final Animation<double> scale;
  late final Animation<double> rotation;
  late final Animation<double> opacity;
  late final Animation<Offset> position;

  ComplexStaggerAnimation({Key? key, required this.controller})
    : super(key: key) {
    // 缩放动画 (0.5-1.5倍，前25%时间)
    scale = Tween<double>(begin: 0.5, end: 1.5).animate(
      CurvedAnimation(
        parent: controller,
        curve: const Interval(0.0, 0.25, curve: Curves.elasticOut),
      ),
    );

    // 旋转动画 (0-720度，25%-50%时间)
    rotation = Tween<double>(begin: 0, end: 4 * pi).animate(
      CurvedAnimation(
        parent: controller,
        curve: const Interval(0.25, 0.5, curve: Curves.easeInOut),
      ),
    );

    // 透明度动画 (1-0.3-1，50%-75%时间)
    opacity = TweenSequence([
      TweenSequenceItem(tween: Tween(begin: 1.0, end: 0.3), weight: 50),
      TweenSequenceItem(tween: Tween(begin: 0.3, end: 1.0), weight: 50),
    ]).animate(
      CurvedAnimation(
        parent: controller,
        curve: const Interval(0.5, 0.75, curve: Curves.easeInOut),
      ),
    );

    // 位置动画 (圆形路径，75%-100%时间)
    position = Tween<Offset>(
      begin: const Offset(0, 0),
      end: const Offset(200, 0),
    ).animate(
      CurvedAnimation(
        parent: controller,
        curve: const Interval(0.75, 1.0, curve: Curves.easeInOut),
      ),
    );
  }

  @override
  Widget build(BuildContext context) {
    return AnimatedBuilder(
      animation: controller,
      builder: (context, child) {
        // 计算圆形路径的位置
        double circleProgress = (controller.value - 0.75) / 0.25;
        circleProgress = circleProgress.clamp(0.0, 1.0);
        double angle = circleProgress * 2 * pi;
        double circleX = 100 + 80 * cos(angle);
        double circleY = 200 + 80 * sin(angle);

        return Container(
          alignment: Alignment.center,
          child: Stack(
            children: [
              // 路径轨迹显示
              if (controller.value > 0.75)
                Positioned(
                  left: 100,
                  top: 200,
                  child: Container(
                    width: 160,
                    height: 160,
                    decoration: BoxDecoration(
                      shape: BoxShape.circle,
                      border: Border.all(
                        color: Colors.blue.withOpacity(0.3),
                        width: 2,
                        style: BorderStyle.solid,
                      ),
                    ),
                  ),
                ),

              // 动画对象
              Positioned(
                left: controller.value < 0.75 ? 200 : circleX,
                top: controller.value < 0.75 ? 200 : circleY,
                child: Transform.scale(
                  scale: scale.value,
                  child: Transform.rotate(
                    angle: rotation.value,
                    child: Opacity(
                      opacity: opacity.value,
                      child: Container(
                        width: 40,
                        height: 40,
                        decoration: BoxDecoration(
                          gradient: LinearGradient(
                            colors: [Colors.purple, Colors.pink],
                            begin: Alignment.topLeft,
                            end: Alignment.bottomRight,
                          ),
                          borderRadius: BorderRadius.circular(20),
                          boxShadow: [
                            BoxShadow(
                              color: Colors.purple.withOpacity(0.4),
                              spreadRadius: 3,
                              blurRadius: 8,
                              offset: const Offset(0, 3),
                            ),
                          ],
                        ),
                        child: const Icon(
                          Icons.star,
                          color: Colors.white,
                          size: 20,
                        ),
                      ),
                    ),
                  ),
                ),
              ),
            ],
          ),
        );
      },
    );
  }
}

// ========================== Hero动画部分 ==========================

class HeroAnimationMainPage extends StatelessWidget {
  const HeroAnimationMainPage({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text('Hero 动画演示'), elevation: 2),
      body: SingleChildScrollView(
        padding: const EdgeInsets.all(16),
        child: Column(
          children: [
            // 说明区域
            Container(
              width: double.infinity,
              padding: const EdgeInsets.all(20),
              decoration: BoxDecoration(
                color: Colors.orange[50],
                borderRadius: BorderRadius.circular(12),
                border: Border.all(color: Colors.orange[200]!),
              ),
              child: Column(
                crossAxisAlignment: CrossAxisAlignment.start,
                children: [
                  Row(
                    children: [
                      Icon(Icons.flight_takeoff, color: Colors.orange[600]),
                      const SizedBox(width: 8),
                      const Text(
                        'Hero 动画说明',
                        style: TextStyle(
                          fontSize: 16,
                          fontWeight: FontWeight.bold,
                        ),
                      ),
                    ],
                  ),
                  const SizedBox(height: 12),
                  const Text(
                    'Hero动画是Flutter中用于页面间共享元素过渡的动画效果。'
                    '当用户从一个页面导航到另一个页面时，共享的Hero元素会平滑地'
                    '从源位置飞到目标位置，创造出连贯的视觉体验。',
                    style: TextStyle(height: 1.5),
                  ),
                ],
              ),
            ),

            const SizedBox(height: 24),

            // Hero示例列表
            _buildHeroExample(
              context,
              title: '头像放大效果',
              subtitle: '点击小头像查看大图效果',
              icon: Icons.account_circle,
              color: Colors.blue,
              onTap:
                  () => Navigator.push(
                    context,
                    MaterialPageRoute(
                      builder: (context) => const HeroAvatarRouteA(),
                    ),
                  ),
            ),

            const SizedBox(height: 16),

            _buildHeroExample(
              context,
              title: '卡片展开效果',
              subtitle: '从小卡片展开到详情页面',
              icon: Icons.card_giftcard,
              color: Colors.green,
              onTap:
                  () => Navigator.push(
                    context,
                    MaterialPageRoute(
                      builder: (context) => const HeroCardListPage(),
                    ),
                  ),
            ),

            const SizedBox(height: 16),

            _buildHeroExample(
              context,
              title: '图标变形效果',
              subtitle: '图标形状和大小的动态变化',
              icon: Icons.transform,
              color: Colors.purple,
              onTap:
                  () => Navigator.push(
                    context,
                    MaterialPageRoute(
                      builder: (context) => const HeroIconTransformPage(),
                    ),
                  ),
            ),

            const SizedBox(height: 16),

            _buildHeroExample(
              context,
              title: '购物车动画',
              subtitle: '商品添加到购物车的飞入效果',
              icon: Icons.shopping_cart,
              color: Colors.red,
              onTap:
                  () => Navigator.push(
                    context,
                    MaterialPageRoute(
                      builder: (context) => const HeroShoppingPage(),
                    ),
                  ),
            ),
          ],
        ),
      ),
    );
  }

  Widget _buildHeroExample(
    BuildContext context, {
    required String title,
    required String subtitle,
    required IconData icon,
    required Color color,
    required VoidCallback onTap,
  }) {
    return Container(
      width: double.infinity,
      child: Card(
        elevation: 4,
        shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(12)),
        child: InkWell(
          onTap: onTap,
          borderRadius: BorderRadius.circular(12),
          child: Padding(
            padding: const EdgeInsets.all(16),
            child: Row(
              children: [
                Container(
                  padding: const EdgeInsets.all(12),
                  decoration: BoxDecoration(
                    color: color.withOpacity(0.1),
                    borderRadius: BorderRadius.circular(10),
                  ),
                  child: Icon(icon, size: 24, color: color),
                ),
                const SizedBox(width: 16),
                Expanded(
                  child: Column(
                    crossAxisAlignment: CrossAxisAlignment.start,
                    children: [
                      Text(
                        title,
                        style: const TextStyle(
                          fontSize: 16,
                          fontWeight: FontWeight.bold,
                        ),
                      ),
                      const SizedBox(height: 4),
                      Text(
                        subtitle,
                        style: TextStyle(fontSize: 14, color: Colors.grey[600]),
                      ),
                    ],
                  ),
                ),
                Icon(
                  Icons.arrow_forward_ios,
                  color: Colors.grey[400],
                  size: 16,
                ),
              ],
            ),
          ),
        ),
      ),
    );
  }
}

// Hero示例1：头像放大
class HeroAvatarRouteA extends StatelessWidget {
  const HeroAvatarRouteA({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('头像展示'),
        backgroundColor: Colors.blue[50],
      ),
      body: Container(
        decoration: BoxDecoration(
          gradient: LinearGradient(
            begin: Alignment.topCenter,
            end: Alignment.bottomCenter,
            colors: [Colors.blue[50]!, Colors.white],
          ),
        ),
        child: Center(
          child: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            children: [
              const Text(
                '用户资料',
                style: TextStyle(fontSize: 24, fontWeight: FontWeight.bold),
              ),
              const SizedBox(height: 32),
              Hero(
                tag: "user_avatar",
                child: GestureDetector(
                  onTap:
                      () => Navigator.push(
                        context,
                        MaterialPageRoute(
                          builder: (context) => const HeroAvatarRouteB(),
                        ),
                      ),
                  child: Container(
                    decoration: BoxDecoration(
                      shape: BoxShape.circle,
                      boxShadow: [
                        BoxShadow(
                          color: Colors.grey.withOpacity(0.3),
                          spreadRadius: 3,
                          blurRadius: 7,
                          offset: const Offset(0, 3),
                        ),
                      ],
                    ),
                    child: ClipOval(
                      child: Container(
                        width: 100,
                        height: 100,
                        color: Colors.blue[300],
                        child: const Icon(
                          Icons.person,
                          size: 60,
                          color: Colors.white,
                        ),
                      ),
                    ),
                  ),
                ),
              ),
              const SizedBox(height: 24),
              const Text(
                '张三',
                style: TextStyle(fontSize: 20, fontWeight: FontWeight.w500),
              ),
              const SizedBox(height: 8),
              Text(
                '点击头像查看大图',
                style: TextStyle(fontSize: 16, color: Colors.grey[600]),
              ),
            ],
          ),
        ),
      ),
    );
  }
}

class HeroAvatarRouteB extends StatelessWidget {
  const HeroAvatarRouteB({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: Colors.black,
      body: GestureDetector(
        onTap: () => Navigator.pop(context),
        child: Container(
          width: double.infinity,
          height: double.infinity,
          child: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            children: [
              Hero(
                tag: "user_avatar",
                child: Container(
                  decoration: BoxDecoration(
                    borderRadius: BorderRadius.circular(20),
                    boxShadow: [
                      BoxShadow(
                        color: Colors.white.withOpacity(0.3),
                        spreadRadius: 5,
                        blurRadius: 15,
                        offset: const Offset(0, 5),
                      ),
                    ],
                  ),
                  child: ClipRRect(
                    borderRadius: BorderRadius.circular(20),
                    child: Container(
                      width: 300,
                      height: 300,
                      color: Colors.blue[300],
                      child: const Icon(
                        Icons.person,
                        size: 150,
                        color: Colors.white,
                      ),
                    ),
                  ),
                ),
              ),
              const SizedBox(height: 40),
              const Text(
                '张三的头像',
                style: TextStyle(
                  color: Colors.white,
                  fontSize: 24,
                  fontWeight: FontWeight.bold,
                ),
              ),
              const SizedBox(height: 16),
              const Text(
                '点击任意位置返回',
                style: TextStyle(color: Colors.white70, fontSize: 16),
              ),
            ],
          ),
        ),
      ),
    );
  }
}

// Hero示例2：卡片展开
class HeroCardListPage extends StatelessWidget {
  const HeroCardListPage({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('商品列表'),
        backgroundColor: Colors.green[50],
      ),
      body: ListView.builder(
        padding: const EdgeInsets.all(16),
        itemCount: 5,
        itemBuilder: (context, index) {
          return Container(
            margin: const EdgeInsets.only(bottom: 16),
            child: Hero(
              tag: "product_card_$index",
              child: Material(
                color: Colors.transparent,
                child: InkWell(
                  onTap:
                      () => Navigator.push(
                        context,
                        MaterialPageRoute(
                          builder:
                              (context) => HeroCardDetailPage(index: index),
                        ),
                      ),
                  borderRadius: BorderRadius.circular(12),
                  child: Card(
                    elevation: 4,
                    shape: RoundedRectangleBorder(
                      borderRadius: BorderRadius.circular(12),
                    ),
                    child: Container(
                      padding: const EdgeInsets.all(16),
                      height: 100,
                      child: Row(
                        children: [
                          Container(
                            width: 68,
                            height: 68,
                            decoration: BoxDecoration(
                              color: Colors.green[100 * (index % 5 + 1)],
                              borderRadius: BorderRadius.circular(8),
                            ),
                            child: Icon(
                              Icons.shopping_bag,
                              color: Colors.green[800],
                              size: 32,
                            ),
                          ),
                          const SizedBox(width: 16),
                          Expanded(
                            child: Column(
                              crossAxisAlignment: CrossAxisAlignment.start,
                              mainAxisAlignment: MainAxisAlignment.center,
                              children: [
                                Text(
                                  '商品 ${index + 1}',
                                  style: const TextStyle(
                                    fontSize: 18,
                                    fontWeight: FontWeight.bold,
                                  ),
                                ),
                                const SizedBox(height: 8),
                                Text(
                                  '这是商品 ${index + 1} 的简短描述',
                                  style: TextStyle(
                                    fontSize: 14,
                                    color: Colors.grey[600],
                                  ),
                                ),
                              ],
                            ),
                          ),
                          Icon(
                            Icons.arrow_forward_ios,
                            color: Colors.grey[400],
                          ),
                        ],
                      ),
                    ),
                  ),
                ),
              ),
            ),
          );
        },
      ),
    );
  }
}

class HeroCardDetailPage extends StatelessWidget {
  final int index;

  const HeroCardDetailPage({Key? key, required this.index}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: Colors.green[50],
      body: SingleChildScrollView(
        child: Column(
          children: [
            Hero(
              tag: "product_card_$index",
              child: Material(
                color: Colors.transparent,
                child: Container(
                  width: double.infinity,
                  height: 400,
                  decoration: BoxDecoration(
                    color: Colors.white,
                    borderRadius: const BorderRadius.only(
                      bottomLeft: Radius.circular(30),
                      bottomRight: Radius.circular(30),
                    ),
                    boxShadow: [
                      BoxShadow(
                        color: Colors.grey.withOpacity(0.2),
                        spreadRadius: 2,
                        blurRadius: 10,
                        offset: const Offset(0, 5),
                      ),
                    ],
                  ),
                  child: Column(
                    children: [
                      const SizedBox(height: 60),
                      Container(
                        width: 200,
                        height: 200,
                        decoration: BoxDecoration(
                          color: Colors.green[100 * (index % 5 + 1)],
                          borderRadius: BorderRadius.circular(20),
                        ),
                        child: Icon(
                          Icons.shopping_bag,
                          color: Colors.green[800],
                          size: 100,
                        ),
                      ),
                      const SizedBox(height: 24),
                      Text(
                        '商品 ${index + 1}',
                        style: const TextStyle(
                          fontSize: 28,
                          fontWeight: FontWeight.bold,
                        ),
                      ),
                      const SizedBox(height: 8),
                      Text(
                        '高品质商品，值得信赖',
                        style: TextStyle(fontSize: 16, color: Colors.grey[600]),
                      ),
                    ],
                  ),
                ),
              ),
            ),
            Padding(
              padding: const EdgeInsets.all(24),
              child: Column(
                crossAxisAlignment: CrossAxisAlignment.start,
                children: [
                  const Text(
                    '商品详情',
                    style: TextStyle(fontSize: 20, fontWeight: FontWeight.bold),
                  ),
                  const SizedBox(height: 16),
                  Text(
                    '这里是商品 ${index + 1} 的详细描述。该商品具有优良的品质和合理的价格，'
                    '是您不错的选择。我们承诺为您提供最好的购物体验和售后服务。',
                    style: const TextStyle(fontSize: 16, height: 1.6),
                  ),
                  const SizedBox(height: 32),
                  SizedBox(
                    width: double.infinity,
                    child: ElevatedButton(
                      onPressed: () => Navigator.pop(context),
                      style: ElevatedButton.styleFrom(
                        backgroundColor: Colors.green,
                        foregroundColor: Colors.white,
                        padding: const EdgeInsets.symmetric(vertical: 16),
                        shape: RoundedRectangleBorder(
                          borderRadius: BorderRadius.circular(12),
                        ),
                      ),
                      child: const Text('返回列表', style: TextStyle(fontSize: 16)),
                    ),
                  ),
                ],
              ),
            ),
          ],
        ),
      ),
    );
  }
}

// Hero示例3：图标变形
class HeroIconTransformPage extends StatelessWidget {
  const HeroIconTransformPage({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('图标变形演示'),
        backgroundColor: Colors.purple[50],
      ),
      body: Container(
        padding: const EdgeInsets.all(24),
        decoration: BoxDecoration(
          gradient: LinearGradient(
            begin: Alignment.topLeft,
            end: Alignment.bottomRight,
            colors: [Colors.purple[50]!, Colors.white],
          ),
        ),
        child: GridView.count(
          crossAxisCount: 2,
          mainAxisSpacing: 20,
          crossAxisSpacing: 20,
          children: [
            _buildIconHero(context, Icons.favorite, Colors.red, 'love'),
            _buildIconHero(context, Icons.star, Colors.orange, 'star'),
            _buildIconHero(context, Icons.thumb_up, Colors.blue, 'like'),
            _buildIconHero(context, Icons.lightbulb, Colors.yellow, 'idea'),
          ],
        ),
      ),
    );
  }

  Widget _buildIconHero(
    BuildContext context,
    IconData icon,
    Color color,
    String tag,
  ) {
    return Hero(
      tag: "icon_$tag",
      child: Material(
        color: Colors.transparent,
        child: InkWell(
          onTap:
              () => Navigator.push(
                context,
                MaterialPageRoute(
                  builder:
                      (context) => HeroIconDetailPage(
                        icon: icon,
                        color: color,
                        tag: tag,
                      ),
                ),
              ),
          borderRadius: BorderRadius.circular(16),
          child: Container(
            decoration: BoxDecoration(
              color: Colors.white,
              borderRadius: BorderRadius.circular(16),
              boxShadow: [
                BoxShadow(
                  color: color.withOpacity(0.2),
                  spreadRadius: 2,
                  blurRadius: 8,
                  offset: const Offset(0, 4),
                ),
              ],
            ),
            child: Column(
              mainAxisAlignment: MainAxisAlignment.center,
              children: [
                Icon(icon, size: 64, color: color),
                const SizedBox(height: 16),
                Text(
                  tag.toUpperCase(),
                  style: TextStyle(
                    fontSize: 16,
                    fontWeight: FontWeight.bold,
                    color: color,
                  ),
                ),
              ],
            ),
          ),
        ),
      ),
    );
  }
}

class HeroIconDetailPage extends StatelessWidget {
  final IconData icon;
  final Color color;
  final String tag;

  const HeroIconDetailPage({
    Key? key,
    required this.icon,
    required this.color,
    required this.tag,
  }) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: color.withOpacity(0.1),
      body: GestureDetector(
        onTap: () => Navigator.pop(context),
        child: Center(
          child: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            children: [
              Hero(
                tag: "icon_$tag",
                child: Material(
                  color: Colors.transparent,
                  child: Container(
                    width: 300,
                    height: 300,
                    decoration: BoxDecoration(
                      color: Colors.white,
                      shape: BoxShape.circle,
                      boxShadow: [
                        BoxShadow(
                          color: color.withOpacity(0.3),
                          spreadRadius: 10,
                          blurRadius: 30,
                          offset: const Offset(0, 10),
                        ),
                      ],
                    ),
                    child: Icon(icon, size: 150, color: color),
                  ),
                ),
              ),
              const SizedBox(height: 60),
              Text(
                tag.toUpperCase(),
                style: TextStyle(
                  fontSize: 32,
                  fontWeight: FontWeight.bold,
                  color: color,
                ),
              ),
              const SizedBox(height: 20),
              const Text(
                '点击任意位置返回',
                style: TextStyle(fontSize: 18, color: Colors.grey),
              ),
            ],
          ),
        ),
      ),
    );
  }
}

// Hero示例4：购物车动画
class HeroShoppingPage extends StatefulWidget {
  const HeroShoppingPage({Key? key}) : super(key: key);

  @override
  State<HeroShoppingPage> createState() => _HeroShoppingPageState();
}

class _HeroShoppingPageState extends State<HeroShoppingPage> {
  int cartCount = 0;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('购物演示'),
        backgroundColor: Colors.red[50],
        actions: [
          Padding(
            padding: const EdgeInsets.only(right: 16),
            child: Stack(
              alignment: Alignment.center,
              children: [
                Hero(
                  tag: "shopping_cart",
                  child: Icon(
                    Icons.shopping_cart,
                    size: 28,
                    color: Colors.red[700],
                  ),
                ),
                if (cartCount > 0)
                  Positioned(
                    right: 0,
                    top: 0,
                    child: Container(
                      padding: const EdgeInsets.all(4),
                      decoration: BoxDecoration(
                        color: Colors.red,
                        borderRadius: BorderRadius.circular(10),
                      ),
                      constraints: const BoxConstraints(
                        minWidth: 20,
                        minHeight: 20,
                      ),
                      child: Text(
                        '$cartCount',
                        style: const TextStyle(
                          color: Colors.white,
                          fontSize: 12,
                          fontWeight: FontWeight.bold,
                        ),
                        textAlign: TextAlign.center,
                      ),
                    ),
                  ),
              ],
            ),
          ),
        ],
      ),
      body: Container(
        decoration: BoxDecoration(
          gradient: LinearGradient(
            begin: Alignment.topCenter,
            end: Alignment.bottomCenter,
            colors: [Colors.red[50]!, Colors.white],
          ),
        ),
        child: GridView.builder(
          padding: const EdgeInsets.all(16),
          gridDelegate: const SliverGridDelegateWithFixedCrossAxisCount(
            crossAxisCount: 2,
            childAspectRatio: 0.8,
            crossAxisSpacing: 16,
            mainAxisSpacing: 16,
          ),
          itemCount: 6,
          itemBuilder: (context, index) {
            return Card(
              elevation: 4,
              shape: RoundedRectangleBorder(
                borderRadius: BorderRadius.circular(12),
              ),
              child: Padding(
                padding: const EdgeInsets.all(12),
                child: Column(
                  children: [
                    Expanded(
                      child: Hero(
                        tag: "product_$index",
                        child: Container(
                          width: double.infinity,
                          decoration: BoxDecoration(
                            color: Colors.red[100 * (index % 3 + 1)],
                            borderRadius: BorderRadius.circular(8),
                          ),
                          child: Icon(
                            Icons.shopping_bag,
                            size: 64,
                            color: Colors.red[700],
                          ),
                        ),
                      ),
                    ),
                    const SizedBox(height: 12),
                    Text(
                      '商品 ${index + 1}',
                      style: const TextStyle(
                        fontSize: 16,
                        fontWeight: FontWeight.bold,
                      ),
                    ),
                    const SizedBox(height: 8),
                    SizedBox(
                      width: double.infinity,
                      child: ElevatedButton(
                        onPressed: () => _addToCart(context, index),
                        style: ElevatedButton.styleFrom(
                          backgroundColor: Colors.red,
                          foregroundColor: Colors.white,
                          shape: RoundedRectangleBorder(
                            borderRadius: BorderRadius.circular(8),
                          ),
                        ),
                        child: const Text('加入购物车'),
                      ),
                    ),
                  ],
                ),
              ),
            );
          },
        ),
      ),
    );
  }

  void _addToCart(BuildContext context, int index) {
    // 模拟添加到购物车的动画效果
    Navigator.push(
      context,
      PageRouteBuilder(
        pageBuilder: (context, animation, secondaryAnimation) {
          return FadeTransition(
            opacity: animation,
            child: HeroCartAnimationPage(
              productIndex: index,
              onComplete: () {
                setState(() {
                  cartCount++;
                });
                Navigator.pop(context);
              },
            ),
          );
        },
        transitionDuration: const Duration(milliseconds: 800),
      ),
    );
  }
}

class HeroCartAnimationPage extends StatefulWidget {
  final int productIndex;
  final VoidCallback onComplete;

  const HeroCartAnimationPage({
    Key? key,
    required this.productIndex,
    required this.onComplete,
  }) : super(key: key);

  @override
  State<HeroCartAnimationPage> createState() => _HeroCartAnimationPageState();
}

class _HeroCartAnimationPageState extends State<HeroCartAnimationPage>
    with TickerProviderStateMixin {
  late AnimationController _controller;

  @override
  void initState() {
    super.initState();
    _controller = AnimationController(
      duration: const Duration(milliseconds: 600),
      vsync: this,
    );
    _startAnimation();
  }

  void _startAnimation() async {
    await _controller.forward();
    widget.onComplete();
  }

  @override
  void dispose() {
    _controller.dispose();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: Colors.transparent,
      body: Stack(
        children: [
          // 背景点击区域
          GestureDetector(
            onTap: widget.onComplete,
            child: Container(
              width: double.infinity,
              height: double.infinity,
              color: Colors.black54,
            ),
          ),

          // 飞向购物车的动画
          AnimatedBuilder(
            animation: _controller,
            builder: (context, child) {
              double progress = _controller.value;
              double startX = MediaQuery.of(context).size.width / 2 - 32;
              double startY = MediaQuery.of(context).size.height / 2;
              double endX = MediaQuery.of(context).size.width - 80;
              double endY = 100;

              double currentX = startX + (endX - startX) * progress;
              double currentY = startY + (endY - startY) * progress;

              return Positioned(
                left: currentX,
                top: currentY,
                child: Transform.scale(
                  scale: 1.0 - progress * 0.7,
                  child: Hero(
                    tag: "product_${widget.productIndex}",
                    child: Container(
                      width: 64,
                      height: 64,
                      decoration: BoxDecoration(
                        color: Colors.red[100 * (widget.productIndex % 3 + 1)],
                        borderRadius: BorderRadius.circular(8),
                      ),
                      child: Icon(
                        Icons.shopping_bag,
                        size: 32,
                        color: Colors.red[700],
                      ),
                    ),
                  ),
                ),
              );
            },
          ),

          // 目标购物车图标
          Positioned(
            right: 16,
            top: 80,
            child: Hero(
              tag: "shopping_cart",
              child: Icon(
                Icons.shopping_cart,
                size: 28,
                color: Colors.red[700],
              ),
            ),
          ),
        ],
      ),
    );
  }
}
